<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .ClassA {
      color: aqua;
    }
    .ClassB {
      border: 1px solid darkkhaki;
    }
    .ClassC {
      background-color: beige;
    }
  </style>
  <body>
    <div id="app">
      <!-- 动态绑定src属性 -->
      <img height="100px" class="ClassC" v-bind:src="img1" alt="" />
      <!-- 动态的属性可以省略v-bind 简写成： -->
      <h1 :class="ca">动态绑定一个类名</h1>
      <!-- 语法在编写的时候，动态的值需要写成数组 -->
      <h1 :class="[ca,cb]">动态绑定多个类名</h1>
      <!-- num>=18那么就加上这个类名 -->
      <!-- 动态绑定类名，如果表达式是一个对象那么可以：进行分割，左边是字符串，右边是变量（会去data里面查找） -->
      <h1 :class="[ca,cb,{ClassC:num>=18}]">
        动态绑定多个类名，ClassA和ClassB是固定的，但是ClassC需要通过num这个数据来进行控制
      </h1>
      <h1 :style="styleA">动态绑定一个样式</h1>
      <h1 :style="[styleA,styleB]">动态绑定多个样式</h1>
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  // 指令是Vue里面设计的一种语法，一般的规律是以v-开头
  // v-bind 动态的个元素或者组件添加一个或多个特性

  const vm = new Vue({
    el: "#app",
    data: {
      num: 19,
      ca: "ClassA",
      cb: "ClassB",
      msg: "999",
      styleA: {
        "background-color": "hotpink",
      },
      styleB: {
        color: "#fff",
      },
      img1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656582785&t=21df2037ac7e767a1f56ea2b348bf09d",
    },
  });
</script>
